{[ template "__start__.html" . ]}
<body>
<div id="app">
    {[ template "__header__.html" . ]}
    <div class="container-fluid">
        <div class="row">
            {[ template "__menu__.html" . ]}
            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

                <div class="box" style="border: 1px solid #D3D3D3;margin-bottom: 16px;">
                    <table class="table table-hover">
                        <thead style="z-index: 99;">
                        <tr>
                            <th scope="col">房间id</th>
                            <th scope="col">当前对局id</th>
                            <th scope="col">房间玩家</th>
                        </tr>
                        </thead>
                        <tbody>
                        <template v-for="item in list">
                            <tr style="font-size: 11px;">
                                <td>{{ item.room_Id }}</td>
                                <td>{{ item.game_id }}</td>
                                <td>
                                    <template v-for="user in item.user_list">
                                        <template v-if="item.homeowner === user.user_id">
                                            [房主]
                                        </template>
                                        (玩家: {{ user.nick_name }} )<img :src="user.avatar" style="width: 32px;height: 32px; border-radius:50%;" /> |
                                    </template>

                                </td>

                            </tr>
                        </template>
                        </tbody>
                    </table>
                </div>

                {[ template "__toast__.html" . ]}
            </main>
        </div>
    </div>
</div>
</body>
{[ template "__js__.html" . ]}
<script>
    const { createApp, ref } = Vue;
    const common = new Utils;
    const app = createApp({
        data() {
            return {
                list: [],
            }
        },
        created:function(){
            let t = this;
            t.getList();
        },
        destroyed:function () {
        },
        methods: {
            getList: function () {
                let t = this;
                common.AjaxGet("/admin/room/list", function (resp) {
                    console.log(resp);
                    t.list = resp.data;
                });
            },
        },
        computed: {
        },
        mounted:function(){
        },
    });
    app.mount('#app');
</script>
{[ template "__end__.html" . ]}